<template>
  <v-card>
    <v-card-title class="align-start flex p-5">
      <v-avatar
        :color="color"
        size="38"
        class="elevation-3"
      >
        <v-icon
          size="24"
          color="white"
          class="rounded-0"
        >
          {{ icon }}
        </v-icon>
      </v-avatar>
      <v-spacer></v-spacer>

      <v-btn
        small
        icon
        flat
        class="me-n3 mt-n1"
      >
        <v-icon color="#736B7D">mdi-dots-vertical</v-icon>
      </v-btn>
    </v-card-title>

    <v-card-text class="text-no-wrap text--primary mt-3">
      <p class="font-semibold text-sm mb-1 text-[#736B7D]">
        {{ statTitle }}
      </p>

      <div class="d-flex align-end flex-wrap">
        <span class="font-bold text-2xl mb-3 text-[#736B7D]">{{ statistics }}</span>
        <span
          class="percentage text-xs mb-2 ml-1"
          :class="checkChange(change) ? 'success--text':'error--text'"
        > {{ change }}</span>
      </div>
      <v-chip
        small
        :color="chipColor"
        class="v-chip-light-bg font-semibold text-[#8B8D92] text-[14px]"
        :class="`${chipColor}--text`"
        disabled
        v-if="chipColor || chipColor !== ''"
      >
        {{ subtitle }}
      </v-chip>
      <p class="text-sm text-[#9C99A3] mb-0" v-else>
<!--        <span>{{ chipColor }}</span>-->
        {{ subtitle }}
      </p>
    </v-card-text>
  </v-card>
</template>

<script lang="ts" setup>
import {toRefs} from "vue";

interface StatisticsCardVerticalProps {
  statTitle: string,
  icon: string,
  color: string,
  subtitle: string,
  statistics: number,
  change: string,
  chipColor?: string,
}

const props = withDefaults(defineProps<StatisticsCardVerticalProps>(), {
  statTitle: '',
  icon: '',
  color: '',
  subtitle: '',
  statistics: 0,
  change: '',
  chipColor: '',
})
console.log('props:', props)
const {statTitle, icon, color, subtitle, statistics, change, chipColor} = toRefs(props)

const checkChange = value => {
  const firstChar = value.charAt(0)
  if (firstChar === '+') {
    return true
  }

  return false
}
</script>

<style lang="scss" scoped>
::v-deep .v-card{
  overflow: visible !important;
}
.percentage {
  top: -8px;
  position: relative;
}
</style>
